<template>
	<view class="tabBar"
		:style="{backgroundColor: btnObject.bg?btnObject.bg:'#fff',paddingRight:btnObject.paddingR?btnObject.paddingR+'rpx':'10rpx',paddingLeft:btnObject.paddingL?btnObject.paddinL+'rpx':'10rpx'}">
		<view class="left">
			<button v-for="item in btnObject.left" :key="item.Name" :size="item.size?item.size:'default'"
				:type="item.type?item.type:'default'" @click="btnClick(item.Name)">{{item.Name}}</button>
		</view>
		<view class="right">
			<button v-for="item in btnObject.right" :key="item.Name" :size="item.size?item.size:'default'"
				:type="item.type?item.type:'default'" @click="btnClick(item.Name)">{{item.Name}}</button>
		</view>
	</view>
</template>

<script>
	export default {
		name: "tabBar",
		props: {
			btnObject: {
				require: true,
				type: Object
			}
		},
		data() {
			return {

			};
		},
		methods: {
			btnClick(e) {
				this.$emit('select', e)
			}
		}
	}
</script>

<style lang="scss">
	.tabBar {
		display: flex;
		align-items: center;
		box-sizing: border-box;

		button {
			margin: 0;
		}

		.left {
			flex: 1;
			display: flex;
		}

		.right {
			flex: 1;
			display: flex;
			justify-content: flex-end;
		}
	}
</style>